<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本列表</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    v-for指令
      1.用于展示列表数据
      2.语法：v-for="(item,index) in xxx" :key="yyy"
      3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
-->

<!-- 准备好一个容器-->
<div id="root">
  <!--  遍历数组-->
  <h2>人员列表(遍历数组)</h2>
  <ul>
    <li v-for="(p,index) in persons" :key="p.id">
      {{p.name}}-{{p.age}}
    </li>
  </ul>
  <!--遍历对象-->
  <h2>汽车信息(遍历对象)</h2>
  <ul>
    <!--of等同于in-->
    <li v-for="(value,key) of car" :key="key">
      {{key}}-{{value}}
    </li>
  </ul>
<!--  遍历字符串-->
  <h2>测试遍历字符串(用的少)</h2>
  <ul>
    <li v-for="(char,index) of str" :key="index">
      {{char}}-{{index}}
    </li>
  </ul>
  <!--遍历指定次数-->
  <h2>测试遍历指定次数(用的少)</h2>
  <ul>
    <li v-for="(number,index) of 5" :key="index">
      {{number}}-{{index}}
    </li>
  </ul>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      persons: [
        {id: '001', name: '张三', age: 18},
        {id: '002', name: '李四', age: 19},
        {id: '003', name: '王五', age: 20}
      ],
      car:{
        name:'奥迪A8',
        price:'70万',
        color:'黑色'
      },
      str:'hello'
    },
    methods: {},
  })
</script>
</html>